<template>
	<view class="root-box root-container root-page-top">
		<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="菜单配置" />
		<view class="content">
			<view class="title-bar-box">
				<view class="title-left-box">
					<view class="text-fix"></view>
					<view class="text-item">首页菜单配置</view>
				</view>
				<uv-icon name="edit-pen-fill" color="red" size="25" @click="onLgSetting"></uv-icon>
			</view>

			<view class="menu-box" v-if="navList">
				<uv-grid :col="5">
					<uv-grid-item v-for="(item,index) in navList" :key="index">
						<view class="grid-item-box">
							<uv-image :src="item.pic" width="30px" height="30px" />
							<uv-text :text="item.cate_name" align="center" size="12"></uv-text>
							<view class="right-fix" v-show="cationLgSetting" @click.stop="onSetHomeMenu(item.id)">
								<tui-icon name="offline-fill" color="#cccccc" size="24"></tui-icon>
							</view>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
			
			<view class="menu-box" v-if="navExList.length>0 && cationLgSetting">
				<uv-grid :col="5">
					<uv-grid-item v-for="(item,index) in navExList" :key="index">
						<view class="grid-item-box">
							<uv-image :src="item.pic" width="30px" height="30px" />
							<uv-text :text="item.cate_name" align="center" size="12"></uv-text>
							<view class="right-fix" v-show="cationLgSetting" @click.stop="onAddHomeExcludeMenu(item.id)">
								<tui-icon name="add-fill" color="#cccccc" size="20"></tui-icon>
							</view>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
			
			

			<view class="title-bar-box m30">
				<view class="title-left-box">
					<view class="text-fix"></view>
					<view class="text-item">邻集市菜单配置</view>
				</view>
				<uv-icon name="edit-pen-fill" color="red" size="25" @click="onLjsSetting"></uv-icon>
			</view>

			<view class="menu-box" v-if="navLjsList">
				<uv-grid :col="5">
					<uv-grid-item v-for="(item,index) in navLjsList" :key="index">
						<view class="grid-item-box">
							<uv-image :src="item.pic" width="30px" height="30px" />
							<uv-text :text="item.cate_name" align="center" size="12"></uv-text>
							<view class="right-fix" v-show="cationLjsSetting" @click.stop="onSetMarketMenu(item.id)">
								<tui-icon name="offline-fill" color="#cccccc" size="24"></tui-icon>

							</view>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
			
			<view class="menu-box" v-if="navExLjsList.length>0 && cationLjsSetting">
				<uv-grid :col="5">
					<uv-grid-item v-for="(item,index) in navExLjsList" :key="index">
						<view class="grid-item-box">
							<uv-image :src="item.pic" width="30px" height="30px" />
							<uv-text :text="item.cate_name" align="center" size="12"></uv-text>
							<view class="right-fix" v-show="cationLjsSetting" @click.stop="onAddHomeExcludeMenu(item.id)">
								<tui-icon name="add-fill" color="#cccccc" size="20"></tui-icon>
			                </view>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
			
			
		</view>







	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/store'
	import {
		getCategoryList,
		getMarketSonCategory
	} from '@/api'

	import {
		getHomeMenuList,
		getMarketMenuList,
		setHomeMenu,
		addHomeExcludeMenu,
		getHomeExcludeMenu,
		setMarketMenu,
		addMarketExcludeMen,
		getMarketExcludeMenu

	} from '@/api/other.js'

	import {
		navigate
	} from '@/util/tools.js';

	const placeholderTxt = ref('请输入小区名称')
	const user = useUserStore()
	const {
		token,
		userInfo
	} = storeToRefs(user)


	const navList = ref([]) //首页菜单
	const navLjsList = ref([]) //邻集市菜单
	
	const navExList = ref([]) //首页排除菜单
	const navExLjsList = ref([]) //邻集市排除菜单
	

	const cationLgSetting = ref(false)

	const onLgSetting = () => {
		cationLgSetting.value = !cationLgSetting.value
	}

	const cationLjsSetting = ref(false)

	const onLjsSetting = () => {
		cationLjsSetting.value = !cationLjsSetting.value
	}

	
	const getHomeCategory = async () => {
		const {
			result
		} = await getHomeMenuList()
		navList.value = result
	}

	const getCategory = async () => {
		const {
			result
		} = await getMarketMenuList()
		navLjsList.value = result
	}

	const onSetHomeMenu = async (id) => {
		console.log('del--home--menu',id)
		let param={}
		param.category_id=id
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		const res = await setHomeMenu(param)
		await getAllMenu()
		uni.hideLoading()
	}
	
	const onAddHomeExcludeMenu = async(id) => {
		console.log('add--home--menu',id)
		let param={}
		param.category_id=id
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		const res = await addHomeExcludeMenu(param)
		await getAllMenu()
		uni.hideLoading()
	}

	const onGetHomeExcludeMenu = async() => {
		const {
			result
		} = await getHomeExcludeMenu()
		navExList.value = result
    }

	const onSetMarketMenu = async(id) => {
		console.log('del--ljs--menu',id)
		let param={}
		param.category_id=id
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		const res = await setMarketMenu(param)
		await getAllMenu()
		uni.hideLoading()
	}

	const onAddMarketExcludeMen = async(id) => {
		console.log('add--ljs--menu',id)
		let param={}
		param.category_id=id
		
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		const res = await addMarketExcludeMen(param)
		await getAllMenu()
		uni.hideLoading()
	}
	const onGetMarketExcludeMenu = async() => {
		const {
			result
		} = await getMarketExcludeMenu()
		 navExLjsList.value = result
	}
	
	const getAllMenu= async()=>{
		await getHomeCategory()
		await getCategory()
		await onGetHomeExcludeMenu()
		await onGetMarketExcludeMenu()
		
	}


	const init = async () => {
		await getAllMenu()
	}
	init()
</script>

<style lang="scss" scoped>
	.root-box {

		.content {
			padding: 30upx;
			box-sizing: border-box;

		}
	}

	.title-bar-box {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.title-left-box {
		display: flex;
		align-items: center;
		font-size: 24upx;
		font-weight: 600;
		color: #333;
	}

	.text-fix {
		width: 4upx;
		height: 26upx;
		background-color: red;
		box-sizing: border-box;
	}

	.text-item {
		margin-left: 10upx;
		padding-bottom: 5upx;
		box-sizing: border-box;
	}

	.menu-box {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx 30upx 30upx;
		box-sizing: border-box;
		border-radius: 20upx;
		box-shadow: 5upx 5upx 5upx #cccccc;
	}

	.grid-item-box {
		position: relative;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;

	}

	.right-fix {
		position: absolute;
		z-index: 5;
		top: -20upx;
		right: -5upx;
	}

	.m30 {
		margin-top: 30upx;
	}
</style>